{{set . "title" "首页"}}
<!-- 主区域 - 科技感英雄区 -->
<div class="relative overflow-hidden grid-lines py-16 sm:py-24">
    <!-- 装饰性圆圈 -->
    <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-cyber-purple bg-opacity-10 blur-2xl"></div>
    <div class="absolute -bottom-32 -left-32 w-96 h-96 rounded-full bg-cyber-blue bg-opacity-10 blur-3xl"></div>
    
    <div class="container mx-auto px-4 sm:px-5 py-16 sm:py-24 max-w-6xl relative z-10">
        <div class="text-center">
            <div class="mb-4 inline-block">
                <div class="inline-block relative">
                    <span class="absolute inset-0 animate-pulse bg-cyber-blue blur-md opacity-30 rounded-full"></span>
                    <h2 class="text-xs sm:text-sm uppercase tracking-widest text-cyber-blue font-orbitron relative">
                        高质量模板资源平台
                    </h2>
                </div>
            </div>
            <h1 class="text-4xl sm:text-6xl font-orbitron text-white mb-6 relative inline-block">
                <span class="neon-text">模库</span> <span class="text-cyber-blue font-bold">Templio</span>
            </h1>
            <p class="mt-4 text-xl text-gray-300 max-w-2xl mx-auto font-rajdhani">
                发现适合您的完美网站模板，立即开始您的在线项目
            </p>
            <div class="mt-10">
                <a href="/templates" class="inline-block px-8 py-3 bg-gradient-to-r from-cyber-blue to-cyber-purple text-white rounded border border-cyber-blue hover-glow font-rajdhani transition-all duration-300 relative overflow-hidden group">
                    <span class="relative z-10">浏览模板</span>
                    <span class="absolute inset-0 bg-gradient-to-r from-cyber-purple to-cyber-blue opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 特色模板 -->
<div class="container mx-auto py-16 max-w-6xl relative">
    <!-- 标题区 -->
    <div class="text-center mb-12 relative">
        <h2 class="text-2xl font-orbitron text-white mb-2 inline-block relative">
            <span class="relative z-10">精选模板</span>
            <span class="absolute bottom-0 left-0 h-1 w-full bg-cyber-blue"></span>
        </h2>
        <div class="w-12 h-1 bg-cyber-blue mx-auto mt-2"></div>
    </div>
    
    <!-- 模板网格 -->
    <div class="masonry-grid columns-2 sm:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6">
        {{range $template := .featuredTemplates}}
        <div class="break-inside-avoid mb-6">
            <a href="/templates/{{$template.Id}}" class="bg-cyber-dark bg-opacity-80 rounded-lg border border-gray-700 transition-all hover:border-cyber-blue hover:shadow-neon-blue group block no-underline overflow-hidden">
                <div class="relative overflow-hidden">
                    <img src="{{$template.Thumb}}" class="w-full object-cover rounded-t-lg transform group-hover:scale-105 transition-transform duration-500" alt="{{$template.Title}}">
                    <div class="absolute inset-0 bg-gradient-to-t from-cyber-dark to-transparent opacity-50"></div>
                    <div class="absolute inset-0 bg-cyber-blue opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
                </div>
                <div class="p-4">
                    <h3 class="text-white text-lg font-rajdhani font-medium line-clamp-1 group-hover:text-cyber-blue transition-colors">{{$template.Title}}</h3>
                    <p class="text-sm text-gray-400 mt-1 font-rajdhani">{{$template.Updated}}</p>
                </div>
            </a>
        </div>
        {{end}}
    </div>
    
    <div class="text-center mt-12">
        <a href="/templates" class="inline-block px-6 py-2 border border-cyber-blue text-cyber-blue rounded hover:bg-cyber-blue hover:bg-opacity-10 transition-all hover-glow font-rajdhani">
            查看更多
        </a>
    </div>
</div>

<!-- 分类展示 -->
<div class="py-16 relative overflow-hidden">
    <!-- 背景装饰 -->
    <div class="absolute -top-40 right-0 w-96 h-96 rounded-full bg-cyber-purple bg-opacity-5 blur-3xl"></div>
    <div class="absolute -bottom-40 -left-20 w-80 h-80 rounded-full bg-cyber-blue bg-opacity-5 blur-2xl"></div>
    
    <div class="container mx-auto max-w-6xl relative z-10">
        <!-- 标题区 -->
        <div class="text-center mb-12">
            <h2 class="text-2xl font-orbitron text-white mb-2 inline-block relative">
                <span class="relative z-10">模板分类</span>
                <span class="absolute bottom-0 left-0 h-1 w-full bg-cyber-blue"></span>
            </h2>
            <div class="w-12 h-1 bg-cyber-blue mx-auto mt-2"></div>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {{range $index, $category := .categories}}
            <a href="/templates?category={{$category.id}}" class="
            {{if eq $index 0}}bg-cyber-dark border-cyber-blue text-cyber-blue
            {{else if eq $index 1}}bg-cyber-dark border-cyber-purple text-cyber-purple
            {{else if eq $index 2}}bg-cyber-dark border-cyber-pink text-cyber-pink
            {{else if eq $index 3}}bg-cyber-dark border-[#00ff7f] text-[#00ff7f]
            {{else if eq $index 4}}bg-cyber-dark border-[#ff7f00] text-[#ff7f00]
            {{else if eq $index 5}}bg-cyber-dark border-[#00ffcc] text-[#00ffcc]
            {{else}}bg-cyber-dark border-gray-600 text-gray-300
            {{end}} 
            p-6 rounded-lg transition-all duration-300 group no-underline border bg-opacity-40 backdrop-blur-sm hover-glow">
                <h3 class="text-lg font-orbitron mb-3 
                {{if eq $index 0}}text-cyber-blue
                {{else if eq $index 1}}text-cyber-purple
                {{else if eq $index 2}}text-cyber-pink
                {{else if eq $index 3}}text-[#00ff7f]
                {{else if eq $index 4}}text-[#ff7f00]
                {{else if eq $index 5}}text-[#00ffcc]
                {{else}}text-gray-300
                {{end}}">{{$category.title}}</h3>
                
                <span class="
                {{if eq $index 0}}text-cyber-blue group-hover:text-white
                {{else if eq $index 1}}text-cyber-purple group-hover:text-white
                {{else if eq $index 2}}text-cyber-pink group-hover:text-white
                {{else if eq $index 3}}text-[#00ff7f] group-hover:text-white
                {{else if eq $index 4}}text-[#ff7f00] group-hover:text-white
                {{else if eq $index 5}}text-[#00ffcc] group-hover:text-white
                {{else}}text-gray-400 group-hover:text-white
                {{end}} transition-colors inline-flex items-center font-rajdhani">
                    浏览分类
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </span>
            </a>
            {{end}}
        </div>
    </div>
</div>